<template>
	<view>
		<!--   消息提示 -->
		<view>
			<u-notice-bar mode="vertical" :list="list"></u-notice-bar>
		</view>
		<!-- 顶部搜索框区域 -->
		<view class="u-p-r-30 u-p-l-30 u-m-t-20">
			<u-row>
				<u-col span="11" text-align="center">
					<!-- 扫描组件 -->
					<scan />
					<scanner />
					<sm />
					<honeywell />
					<hk />
					<!-- 搜索框 -->
					<u-search placeholder="输入商品关键词搜索" :clearable="true" v-model="keyword" border-color="#606266"
						@custom="search" @search="search" />
				</u-col>
				<u-col span="1" text-align="center" @click="scang">
					<!-- 扫描图标 -->
					<view class="u-m-t-14 weikaishi5">
						<u-icon name="scan" color="#2b85e4" size="45" />
					</view>
				</u-col>
			</u-row>
		</view>

		<!--    from -->
		<!--    from -->
		<view v-show="fromGood" style="margin-left: 40rpx; margin-right: 40rpx">
			<u-form :model="goodsOne" ref="uForm" label-width="150rpx">
				<u-form-item label="商品ID"><u-input disabled v-model="goodsOne.id" readonly /></u-form-item>
				<u-form-item label="商品名称"><u-input disabled v-model="goodsOne.goodsName" readonly /></u-form-item>
				<u-form-item label="商品编号"><u-input disabled v-model="goodsOne.goodsNumber" /></u-form-item>
				<u-form-item label="商品码"><u-input disabled v-model="goodsOne.goodsPcode69" /></u-form-item>
				<u-form-item label="商品码2"><u-input border v-model="goodsOne.goodsXcode69" /></u-form-item>
				<u-form-item label="商品码3"><u-input border v-model="goodsOne.goodsHcode69" /></u-form-item>
			</u-form>
			<u-button @click="openPopup" type="warning">提交</u-button>
		</view>


		<!-- 弹出框 -->
		<u-popup v-model="goodsPopup" mode="center" closeable width="550rpx" height="600rpx">
			<view class="wrap">
				<u-row v-for="(item, index) in goodList" :key="index" @click="xuanzeGoods(item)">
					<u-row>
						<u-col span="1" text-align="center">
							<view class="u-line-1 u-m-t-8">
								<!-- 图标 -->
								<u-icon name="https://z3.ax1x.com/2021/07/19/WJFqj1.png" color="#2b85e4" size="30" />
							</view>
						</u-col>
						<u-col span="11">
							<view class="weikaishi3">
								<!-- 商品名称 -->
								<span v-html="item.goodsName" />
							</view>
						</u-col>
						<u-col span="12" text-align="left">
							<view class="u-m-t-10 weikaishi heise">
								<!-- 编号 -->
								<view class="u-m-t-10 weikaishi lanse">编号: {{ item.goodsNumber }}</view>
								<!-- 条码 -->
								<view>条码: {{ item.goodsPcode69 }}</view>
								<view>箱码: {{ item.goodsXcode69 }}</view>
								<view>盒码: {{ item.goodsHcode69 }}</view>
							</view>
						</u-col>
						<u-row>
							<u-col span="12" text-align="center">
								<!-- 分隔线 -->
								<view class="jiange" />
							</u-col>
						</u-row>
					</u-row>
				</u-row>
			</view>
		</u-popup>
		<!--页面遮罩层-->
		<view>
			<u-popup v-model="subPopup" mode="center" border-radius="14" class="confirm-popup">
				<view class="popup-content">
					<text class="message">此操作将永久修改该信息, 是否继续?</text>
					<view class="button-group">
						<u-button @click="subPopup = false;" size="medium" shape="circle">取消</u-button>
						<u-button @click="submit" type="primary" size="medium" shape="circle">确定</u-button>
					</view>
				</view>
			</u-popup>
		</view>

	</view>
</template>

<script>
	import scan from "@/components/uni-scan/scan.vue"
	import scanner from "@/components/uni-scan/scanner.vue"
	import sm from "@/components/uni-scan/sm.vue"
	import honeywell from "@/components/uni-scan/honeywell.vue"
	import hk from "@/components/uni-scan/hk.vue"

	export default {
		components: {
			scan,
			scanner,
			sm,
			honeywell,
			hk,
		},
		data() {
			return {
				goodsId: '', // 商品id
				goodsPopup: false, // 弹出框属性
				keyword: '', // 搜索输入框
				goodList: [], // 商品列表
				goodsOne: {}, // 商品详情
				fromGood: false, // 商品详情属性
				list: ['手输有风险，扫码更安全', '如需修改更多信息，请联系管理员'],
				show: true, // 遮罩层属性
				subPopup: false, // 提交按钮
			}
		},
		onShow() {
			let srcPositionCodeObtained = false;
			let tarPositionCodeObtained = false;

			uni.$off('scan');
			uni.$on('scan', (res) => {
				console.log('扫码结果：', res.codeStr);

				if (!srcPositionCodeObtained) {
					this.goodsOne.goodsXcode69 = res.codeStr;
					srcPositionCodeObtained = true;
					if (tarPositionCodeObtained) {
						tarPositionCodeObtained = false; // 如果this.form.tarPositionCode已经被赋值过，则将它的标志重置
					}
				} else if (!tarPositionCodeObtained) {
					this.goodsOne.goodsHcode69 = res.codeStr;
					
					tarPositionCodeObtained = true;
					if (srcPositionCodeObtained) {
						srcPositionCodeObtained = false; // 如果this.form.srcPositionCode已经被赋值过，则将它的标志重置
					}
				}
			});

			uni.$off('scanner') // 每次进来先 移除全局自定义事件监听器
			uni.$on('scanner', (res) => {
				console.log('扫码结果：', res.code);
				if (!srcPositionCodeObtained) {
					this.goodsOne.goodsXcode69 = res.code;
					srcPositionCodeObtained = true;
					if (tarPositionCodeObtained) {
						tarPositionCodeObtained = false; // 如果this.form.tarPositionCode已经被赋值过，则将它的标志重置
					}
				} else if (!tarPositionCodeObtained) {
					this.goodsOne.goodsHcode69 = res.code;
					
					tarPositionCodeObtained = true;
					if (srcPositionCodeObtained) {
						srcPositionCodeObtained = false; // 如果this.form.srcPositionCode已经被赋值过，则将它的标志重置
					}
				}
			})
			uni.$off('sm') // 每次进来先 移除全局自定义事件监听器
			uni.$on('sm', (res) => {
				console.log('扫码结果：', res.code);
				if (!srcPositionCodeObtained) {
					this.goodsOne.goodsXcode69 = res.code;
					srcPositionCodeObtained = true;
					if (tarPositionCodeObtained) {
						tarPositionCodeObtained = false; // 如果this.form.tarPositionCode已经被赋值过，则将它的标志重置
					}
				} else if (!tarPositionCodeObtained) {
					this.goodsOne.goodsHcode69 = res.code;
					
					tarPositionCodeObtained = true;
					if (srcPositionCodeObtained) {
						srcPositionCodeObtained = false; // 如果this.form.srcPositionCode已经被赋值过，则将它的标志重置
					}
				}
			})
			uni.$off('honeywell') // 每次进来先 移除全局自定义事件监听器
			uni.$on('honeywell', (res) => {
				console.log('扫码结果：', res.code);
				if (!srcPositionCodeObtained) {
					this.goodsOne.goodsXcode69 = res.code;
					srcPositionCodeObtained = true;
					if (tarPositionCodeObtained) {
						tarPositionCodeObtained = false; // 如果this.form.tarPositionCode已经被赋值过，则将它的标志重置
					}
				} else if (!tarPositionCodeObtained) {
					this.goodsOne.goodsHcode69 = res.code;
					
					tarPositionCodeObtained = true;
					if (srcPositionCodeObtained) {
						srcPositionCodeObtained = false; // 如果this.form.srcPositionCode已经被赋值过，则将它的标志重置
					}
				}
			})
		},
		methods: {
			/* 扫码方法 */
			scang() {
				let that = this
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						that.keyword = res.result
						that.search()
					},
				})
			},
			/* 选择按钮 */
			xuanzeGoods(item) {
				this.goodsId = item.id
				console.log('商品id：' + this.goodsId)
				this.goodsPopup = false
				this.findGoodsSum()
			},
			/* 点击详情 */
			findGoodsSum() {
				uni.showLoading({
					title: '加载中...'
				})
				this.$http.post('/rest/hxStorageStock/findGoodsOneBySpec', {}, {
					params: {
						goodsId: this.goodsId,
					},
					header: {
						'Authorization': uni.getStorageSync('token'),
					}
				}).then(res => {
					if (res.data.data != null) {
						this.goodsOne = res.data.data;
						this.fromGood = true;
						uni.hideLoading();
					} else {
						this.goodsOne = {}
						uni.showToast({
							title: "暂无库存数据",
							icon: 'none'
						})
						uni.hideLoading();
					}
				})
			},
			/* 搜索按钮 */
			search() {
				if (this.keyword == '') {
					uni.showToast({
						title: "请输入搜索条件",
						icon: 'none'
					})
				}
				this.$http.post('/rest/hxStorageStock/goodslist', {}, {
					params: {
						condition: this.keyword
					},
					header: {
						'Authorization': uni.getStorageSync('token'),
					}
				}).then(res => {
					if (res.data.data != '') {
						let arr = []
						let inta = 0
						for (let item1 of res.data.data) {
							if (inta != 10) {
								arr.push(item1)
							} else {
								break
							}
							inta++
						}
						this.goodList = arr
						this.goodsPopup = true
					} else {
						uni.showToast({
							title: "查无结果，请重新输入搜索条件",
							icon: 'none'
						})
					}

				})
			},
			/*打开弹框*/
			openPopup() {
				this.subPopup = true;
			},
			/*提交*/
			submit() {
				uni.showLoading({
					title: '加载中...'
				})
				this.$http.post('/rest/hxStorageStock/updateGoodsOneBySpec', {}, {
					params: {
						Id: this.goodsId,
						goodsXcode69: this.goodsOne.goodsXcode69,
						goodsHcode69: this.goodsOne.goodsHcode69,
					},
					header: {
						'Authorization': uni.getStorageSync('token'),
					}
				}).then(res => {
					uni.showToast({
						title: res.data.data,
						icon: 'none'
					})
					uni.hideLoading();
					this.subPopup = false;
					this.fromGood = false; // from
				}).catch(err => {
					uni.showToast({
						title: err.data.data,
						icon: 'none'
					})
					this.subPopup = false;
				})
			},

		}
	}
</script>

<style lang="scss">
	/* 弹出窗口样式 */
	.confirm-popup {
		width: 70%;
		/* 使用百分比自适应屏幕宽度 */
		max-width: 800rpx;
		/* 最大宽度限制 */
		border-radius: 50%;
		overflow: hidden;
		background-color: #FFFFFF;
	}

	/* 弹出窗口内容样式 */
	.popup-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx;
		/* 使用 rpx 作为内边距 */
	}

	/* 弹出窗口消息文本样式 */
	.message {
		margin-bottom: 20rpx;
		/* 消息和按钮之间的间距 */
		text-align: center;
		font-size: 25rpx;
		/* 根据需要调整字体大小 */
		color: #333333;
		/* 文本颜色 */
	}

	/* 按钮组样式 */
	.button-group {
		display: flex;
		justify-content: space-around;
		width: 100%;
	}

	/* 按钮样式 */
	.button-group u-button {
		width: 45%;
		/* 按钮宽度，根据需要调整 */
		margin: 0 10rpx;
		/* 按钮之间的间距 */
	}

	/**/
	.chen-icon {
		position: absolute;
		margin-left: 2%;
		z-index: 1; //要害代码
	}

	.u-body-item {
		padding: 20rpx 15rpx;
	}

	.wrap {
		padding: 10rpx;
	}

	.u-row {
		margin: 10rpx 2rpx;
	}

	.demo-layout {
		height: 40rpx;
		border-radius: 8rpx;
		line-height: 40rpx;
	}

	.demo-layout2 {
		height: 165rpx;
		border-radius: 8rpx;
	}

	.demo-layout3 {
		height: 900rpx;
		border-radius: 8rpx;
	}

	.bg-purple {
		background: #ffffff;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.weikaishi2 {
		font-size: 37rpx;
	}

	.weikaishi3 {
		font-size: 30rpx;
	}

	.weikaishi4 {
		font-size: 35rpx;
	}

	.weikaishi5 {
		font-size: 40rpx;
	}

	.charts-box {
		width: 100%;
		height: 300px;
	}

	.jiange {
		border-bottom: 1px solid #e1e1e1;
	}
</style>